HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.

Demo:

This demo displays historical stock data for Google from their IPO to March 5th, 2010. This data was acquired through the Google Finance website.

You can mouse over the chart for additional data, as well as zoom and pan the charts using the grey bottons. For best results view with FireFox, Chrome, or Safari.

NASDAQ:GOOG
html 
<div id="finance">
  <div id="labels">
    <div id="financeTitle">NASDAQ:GOOG</div>
    <div id="time">
      <a onclick="HumbleFinance.zoom(5);">1w</a>
      <a onclick="HumbleFinance.zoom(21);">1m</a>
      <a onclick="HumbleFinance.zoom(65);">3m</a>
      <a onclick="HumbleFinance.zoom(127);">6m</a>
      <a onclick="HumbleFinance.zoom(254);">1y</a>
      <a onclick="HumbleFinance.zoom(1265);">5y</a>
    </div>
    <div id="dateRange"></div>
  </div>
</div>
demo.js 
Event.observe(document, 'dom:loaded', function() {
    
    HumbleFinance.trackFormatter = function (obj) {
        
        var x = Math.floor(obj.x);
        var data = jsonData[x];
        var text = data.date + " Price: " + data.close + " Vol: " + data.volume;
        
        return text;
    };
    
    HumbleFinance.yTickFormatter = function (n) {
        
        if (n == this.axes.y.max) {
            return false;
        }
        
        return '$'+n;
    };
    
    HumbleFinance.xTickFormatter = function (n) { 
        
        if (n == 0) {
            return false;
        }
        
        var date = jsonData[n].date;
        date = date.split(' ');
        date = date[2];
        
        return date; 
    }
    
    HumbleFinance.init('finance', priceData, volumeData, summaryData);
    HumbleFinance.setFlags(flagData); 
    
    var xaxis = HumbleFinance.graphs.summary.axes.x;
    var prevSelection = HumbleFinance.graphs.summary.prevSelection;
    var xmin = xaxis.p2d(prevSelection.first.x);
    var xmax = xaxis.p2d(prevSelection.second.x);
    
    $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    
    Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
        
        var area = e.memo[0];
        xmin = Math.floor(area.x1);
        xmax = Math.ceil(area.x2);
        
        var date1 = jsonData[xmin].date;
        var date2 = jsonData[xmax].date;
        
        $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    });
});